<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { Editor, RowFlex } from '@hufe921/canvas-editor'
import baseCard from '@/components/base-card/index.vue'

import { HotTable } from '@handsontable/vue3';
import 'handsontable/dist/handsontable.full.css';//表格样式
import { registerAllModules } from 'handsontable/registry'; // 在线编辑样式
import 'handsontable/languages/zh-CN'; //汉语包
import { registerCellType, NumericCellType } from 'handsontable/cellTypes';
import { registerPlugin, UndoRedo } from 'handsontable/plugins';
registerAllModules();
registerCellType(NumericCellType);
registerPlugin(UndoRedo);


//定义handsontable的ref
const hotTableRef = ref<any>(null);
const settings = ref<any>(
    {
        language: 'zh-CN', // 官方汉化
        licenseKey: 'non-commercial-and-evaluation', //去除底部非商用声明

        //colHeaders     
        colHeaders: [
            "病人姓名",
            "病人身份证号",
            "病人类型"
        ],

        //columns        
        columns: [

            {
                data: "病人姓名",
                readOnly: false,
                type: "text",
                dateFormat: null,
                source: null,
                strict: false,
                numericFormat: null
            },
            {
                data: "病人身份证号",
                readOnly: false,
                type: "text",
                dateFormat: null,
                source: null,
                strict: false,
                numericFormat: null
            },
            {
                data: "病人类型",
                readOnly: false,
                type: "text",
                dateFormat: null,
                source: null,
                strict: false,
                numericFormat: null
            }
        ],
        //data
        data: [
            {
                "病人姓名": "测试",
                "病人身份证号": "123456789",
                "病人类型": "贫困户"
            },
            {
                "病人姓名": "张三",
                "病人身份证号": "369258147",
                "病人类型": "贫困户"
            }
        ],
        currentRowClassName: 'currentRow', // 突出显示行
        currentColClassName: 'currentCol', // 突出显示列
        minSpareRows: 2, //行留白
        autoWrapRow: false, //自动换行
        minRows: 2100,
        trimWhitespace: false, //去除空格
        rowHeaderWidth: 100, //单元格宽度
        stretchH: 'all',
        renderAllRows: false,
        rowHeaders: true, // 行标题   布尔值 / 数组/  函数
        formulas: false, //公式
        copyable: true, // 允许键盘复制
        wordWrap: false, // 自动换行
        copyPaste: true, //复制粘贴
        filters: false, //允许通过内置组件或API过滤表数据
        search: false,
        fixedColumnsLeft: 0, // 固定左边列数
        fixedRowsTop: 0, // 固定上边列数
        columnSorting: true, // 排序
        contextMenu: true, //右键菜单
    },
)


onMounted(() => {
        //vue3的获取核心方法在hotInstance中
        let  a= hotTableRef.value.hotInstance.getSourceData(); //获取源数据 （对                          象数组或数组的数组）
		let b = hotTableRef.value.hotInstance.getData();  //获取数据（数组的数组）
        console.log(a,b);
        
})
onUnmounted(() => {

})

function print() {
    console.log(hotTableRef.value)
    
    console.log(hotTableRef.value.hotInstance.getData())
}


</script>
<template>
    <baseCard title="EXCEL">
        <button @click="print">打印</button>
        <hot-table width="100%" height="500" :settings="settings" ref="hotTableRef"></hot-table>
    </baseCard>
</template>
<style src="./index.scss" scoped></style>